<template>
  <div class="post-detail">
    <el-card>
      <!-- <el-breadcrumb separator="/" style="margin-bottom: 20px;">
        <el-breadcrumb-item :to="{ name: 'index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ name: 'discuss' }"
          >图书论坛</el-breadcrumb-item
        >
        <el-breadcrumb-item
          >{{ post.title }}</el-breadcrumb-item
        >
      </el-breadcrumb> -->
      <div class="p-header">
        <h2>{{ post.title }}</h2>
        <div class="p-info">
          <img :src="bindIMG()" alt="" />
          <div>
            <p class="p-author">{{ post.author ? post.author.name : "-" }}</p>
            <p class="p-date">
              发布于<i>{{ post.ctime | formatDate }}</i>
            </p>
          </div>
        </div>
      </div>
      <div class="p-content markdown-body" v-html="post.htmlcontent" v-highlight></div>
      <div class="p-comment">
        <div class="p-comment-header">
          <el-input type="text" v-model="comment"></el-input>
          <el-button class="comment-btn" @click="addComment()">评论</el-button>
        </div>
        <div class="p-comment-content">
          <ul class="p-comment-list">
            <li class="p-comment-item" v-for="item in commentList" :key="item.id">
              <img :src="bindIMG()" alt="" />
              <div>
                <p class="p-comment-author">{{ item.user ? item.user.name : '...' }}</p>
                <p class="p-comment-content">{{ item.content }}</p>
                <p class="p-comment-date">{{ item.ctime | formatDate }}</p>
              </div>
              <div class="p-comment-tools">
                <!-- <a href="javascript:;"> <i class="iconfont icon-discuss"></i>回复</a> -->
              </div>
            </li>
          </ul>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import api from '@api';
import { bindIMG } from '@utils';
import { nanoid } from 'nanoid';
import { mapActions, mapGetters, mapState } from 'vuex';
export default {
  props: ['id'],
  data () {
    return {
      comment: '',
      post: {},
      commentList: {}
    };
  },
  methods: {
    bindIMG,
    ...mapActions(['getAllFile']),
    async fetchComment () {
      const list = await api.getCommentByPostId({ id: this.id });
      this.commentList = list.map((item) => {
        const user = this.getUserById(item.userid);
        const avatar = this.getFileById(item.userid);
        return {
          ...item,
          user,
          avatar: avatar ? avatar.filename : undefined
        };
      });
    },
    async addComment () {
      if (this.comment.trim().length === 0) {
        this.$message.warning('评论不能为空');
        return;
      }
      const { success } = await api.addComment({
        content: this.comment,
        id: nanoid(),
        ctime: Date.now(),
        postid: this.id,
        userid: this.currentUser.id
      });
      if (success) {
        this.comment = '';
        this.fetchComment();
        this.$message.success('评论成功');
      } else {
        this.$message.error('评论失败');
      }
    }
  },
  computed: {
    ...mapState(['currentPost', 'currentUser']),
    ...mapGetters(['getUserById', 'getFileById'])
  },
  created () {
    this.post = this.currentPost;
    console.log('this.post :', this.post);
    this.getAllFile();
    this.fetchComment();
  }
};
</script>

<style lang="less" scoped>
.p-header {
  padding-bottom: 26px;

  h2 {
    font-size: 26px;
    font-weight: normal;
    padding-left: 20px;
    margin-top: 0;
  }

  .p-info {
    display: flex;
    margin-top: 20px;

    img {
      width: 40px;
      height: 40px;
      // border: 1px solid #dee;
    }

    p {
      margin: 0;
      margin-left: 20px;
    }

    .p-author {
      font-size: 16px;
      margin-bottom: 6px;
    }

    .p-date {
      font-size: 12px;
      color: #8a92a9;

      i {
        margin-left: 5px;
        color: #062743;
        font-style: normal;
      }
    }
  }
}

.p-content {
  padding: 10px;
  text-indent: 2em;
  background-color: #eee;
  min-height: 300px;
  //   line-height: 1;
}

.p-comment {
  padding-top: 26px;

  .p-comment-header {
    display: flex;
    padding-bottom: 26px;

    .el-button {
      margin-left: 4px;
    }
  }

  .p-comment-list {
    max-width: 600px;

    .p-comment-item {
      display: flex;
      position: relative;
      border-bottom: 1px solid #eee;
      padding: 10px 0;

      img {
        width: 40px;
        height: 40px;
        margin-right: 8px;
      }

      p {
        margin: 0;
        font-size: 16px;
        color: #111;
        margin-bottom: 4px;
      }

      .p-comment-date {
        color: #888;
        font-size: 13px;
      }

      .p-comment-tools {
        position: absolute;
        right: 0;
        bottom: 0;

        a {
          font-size: 16px;
          color: #888;

          i::before {
            font-size: 16px;
            margin-right: 4px;
          }

          &:hover {
            color: #92cd18;
          }
        }
      }
    }
  }
}

.comment-btn {
  width: 140px;
  border-radius: 20px;
  border: 1px solid #eba613;
  color: #eba613;

  &:hover {
    background-color: #eba613;
    color: #fff;
  }
}
</style>
